<template>
    <!-- 待处理已处理组件 -->
    <div class="state">
      <div class="stateItem" :class="{scloB: $route.name === 'pending'}"  @click="clolochange(0)">
        <p>待处理</p>
      </div>
      <div class="stateItem" :class="{scloB: $route.name === 'pendingsuccess'}" @click="clolochange(1)">
        <p>已处理</p>
      </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            ndata: true,
            cdata: 0,
            Nate: ''
        }
    },
    methods: {
        clolochange(z) {
            this.cdata = z
            if (z === 0) {
                this.$emit('routerL')
            } else if (z === 1) {
                this.$emit('routerR')
            }
        }
    },
    created() {
        this.cdata = this.$store.state.staff.changeDta
    }
}
</script>

<style lang="less">
.state{
  height: 50px;
  width:100%;
  position:fixed;
  z-index: 10;
  top:51px;
  background-color:white;
  border-bottom: 1px solid #E4E4E4;
  display:flex;
    .stateItem{
    margin-top:10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    width: 100%;
    font-size:14px;
    color:#000;
    }
    .stateItem:nth-of-type(1){
        border-right:1px solid #E6E6E6;
    }
    .scloB{
            color:#139BDF;
    }
}


</style>
